#{extends 'mainFMPA.html' /}#{set title:'Modification de la FMPA' /}

<style type="text/css"> 
@import "../../../public/javascripts/jquery-ui-1.8.13.custom/css/ui-lightness/jquery-ui-1.8.13.custom.css";
</style>
<script type="text/javascript" src="../../../public/javascripts/jquery-ui-1.8.13.custom/js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="../../../public/javascripts/jquery-ui-1.8.13.custom/development-bundle/ui/i18n/jquery.ui.datepicker-fr.js"></script>

<SCRIPT>
	$(function() {
		$( "#date" ).datepicker();
	});
</SCRIPT>

<h1 style="width:400px;">Modifier la FMPA</h1>
<div id="detail_fmpa">
#{form @modifFMPA()}
    <p>
 	    <label for="cis" id="cis">CIS* :</label>
        #{select 'cis', items:centres, id:'cis', valueProperty:'id', value:idCis}
        #{/select}
    </p>
    <p>
        <label for="date">Date :</label>
        <input type="text" name="date" id="date" value="${date}" />
    <p>
    <p>
 	    <label for="thematique">Th&eacute;matique* :</label>
        #{select 'thematique', items:thematiques, id:'thematique', valueProperty:'id', value:idThema, onChange:'change()'}
        #{/select}
    </p>
    <p id="aModifier">
    	<label for="sousThematique" id="choix">S&eacute;lectionnez un Th&egrave;me &agrave; ajouter :</label>
		#{select 'sousThematique', items:sousThematiques, id:'sousThematique',valueProperty:'nom', value:'0', onChange:'ajoutTheme()'}
        	#{option 0}-- Choisir une valeur --#{/option}
		#{/select}
    </p>
    <p>
 	    <label for="Theme">Th&egrave;me :</label>
    	<textarea name="Theme" id="Theme" >${fmpa.sousThematique}</textarea>
        
    </p>
    <p>
 	    <label for="description">Description :</label>
    	<textarea name="description" id="description" >${fmpa.description}</textarea>
        
    </p>
    <p>
 	    <label for="duree">Dur&eacute;e :</label>
        #{select 'duree', items:durees, id:'duree', valueProperty:'id', value:idDuree}
        #{/select}
    </p>
    <p>
       	<label for="observation">Observation :</label>
    	<textarea name="observation" id="observation" >${fmpa.observation}</textarea>
    </p>
    <p>
	<input type="hidden" name="fmpa" value=${fmpa.id} >
    <p style="margin-top:30px">    
        <input type="submit" value="Enregistrer les modifications" /><input type="button" onClick="self.location.href='@{FMPAs.detailFMPA(fmpa.id)}'" value="retour" />
    </p>
#{/form}
</div>

<SCRIPT type="text/javascript">
	function change(){
	    var maThematique=document.getElementById("thematique").options[document.getElementById("thematique").selectedIndex].value
	    $('#aModifier').load("/theme/"+maThematique)
	}
</SCRIPT>
        
<SCRIPT type="text/javascript">
	function ajoutTheme(){
	    var monTheme=document.getElementById('sousThematique').options[document.getElementById('sousThematique').selectedIndex].value
	    if(document.getElementById('Theme').value==""&& monTheme!=0){
	    	document.getElementById('Theme').value+=monTheme
	    }else if(monTheme!=0){
	    document.getElementById('Theme').value+=", "+monTheme
	    }
	}
</SCRIPT>